• 今天要介紹RxJS裡一個相當有用的operator ~tap。☕
• 還記得scan很盡責的在每個步驟，回報對應的值吧，tap能協助我們在pipe的每個步驟之間，顯示值的變化情形，方便你debug，加速建立整個流程。
• tap要說的東西不少，我們分為上、下集來進行。

tap

圖片來源 RxJS 官方網站 - tap

• 從彈珠圖來看，tap吃進什麼資料，就會如實的吐出來，因此最常被使用來debug。
• 另外，tap還有一個特性，就是不會改變streaming data，但可以讓你進行一些side effect的設計，例如:當某一個值>3，發出alert，這樣更能讓每個operator各司其職，專注各自的工作。

case1: basic

stackblitz

import { from, map, tap } from 'rxjs';

// case1: tap() basic
console.log('=== case1: tap() basic ===');
from([1, 2, 3, 4, 5])
  .pipe(
    tap((val) => console.log('[tap]:', val)), //<-- 放一個tap觀察點在此
    map((val) => val * 10)
  )
  .subscribe(console.log);
  

• 印出結果如下，在對應的點放置tap進行觀察，就能如期地得到當下的資訊。

case2: 資料流可遠觀不可褻玩焉

// case2: test to modify stream value in tap()
console.log('=== case2: test to modify stream value in tap() ===');
from([1, 2, 3, 4, 5])
  .pipe(
    tap((val) => {
      return val + 999; //<-- 在tap修改值並不會有任何作用
    }),
    map((val) => val * 10)
  )
  .subscribe(console.log);

• 印出的結果如下，代表著tap不允許我們隨意更動stream的值

tap(observer)

圖片來源 RxJS 官方網站 - tap

• 從tap官網的定義有個有趣的地方，括號內的第一個參數是observerOrNext，而另外兩個則為error及complete。

1. observerOrNext: 代表著:

• 如果我們給予一個callback func，那它會認定是tap的next()
• 如果是一個observer object，就會認定為是tap的observer。

2. 另外兩個則為error及complete，簡單來說，你可以在這兩個參數的位置定義callback func，不過我們還是習慣一口氣把observer定義好，這也是為什麼RxJS也準備在v8把它丟掉啦!

case3: tap+observer

stackblitz

import { from, map, tap } from 'rxjs';

// case3: tap(observer)
console.log('=== case3: tap(observer) ===');

// 定義tap的observer
const observer = {
  next: (val) => console.log('tap next:', val),
  error: (err) => console.log('tap error:', err),
  complete: () => console.log('tap complete'),
};

from([1, 2, 3, 4, 5])
  .pipe(
    tap(observer), //<-- 放入observer，當偵測到沒有 streaming時，在此呼叫tap complete
    map((val) => val * 10)
  )
  .subscribe(console.log);

• 建立一個observer給tap，當偵測到沒有 streaming時，在此呼叫tap complete

✍Recap

• tap可以讓我們在pipe的任何位置擷取當前資料流的結果，協助debug作業。

• tap(nextFunc): 若輸入為一個函示，則會自動地以它當作next callback func

• tap(observer): 若輸入為一個observer，則會自動的套用next、error及complete對應的callback func。

• 第15天順利完成，成功沒有途徑，一點一滴累積，你就是專家!